<!-- 员工管理 -->
<template>
    <div class="app-container">
        <div class="container">
            <!-- <el-row>
                <el-form :inline="true" :model="listQuery">
                    <el-form-item label="用户名">
                        <el-input v-model="listQuery.loginName" placeholder="用户名" clearable />
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="listQuery.status" placeholder="状态" clearable>
                            <el-option label="正常" value="0" />
                            <el-option label="禁用" value="99" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSearch">查询</el-button>
                        <el-button type="primary" @click="onCreate">新增</el-button>
                    </el-form-item>
                </el-form>
            </el-row> -->
            <el-row>
                <el-table :data="list" v-loading="listLoading" element-loading-text="拼命加载中" border fit
                    highlight-current-row>
                    <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                    <el-table-column prop="id" label="策略id" width="85" align="center"></el-table-column>
                    <el-table-column prop="strategyName" label="策略名称"  align="center"></el-table-column>
                    <el-table-column prop="strategyDesc" label="策略描述"  align="center"></el-table-column>
                    <el-table-column prop="methodName" label="方法名称" width="145" align="center"></el-table-column>

                    <el-table-column label="状态" width="145" align="center">
                        <template #default="scope">
                            <el-tag>{{ scope.row.status === 1 ? '启用' : '禁用' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="启用的周期值" align="center">
                        <template #default="scope">
                            <el-tag v-if="scope.row.period" style="margin-left: 5px;" v-for="(item,index) in scope.row.period.split(',')">{{ periodDesc[item] }}</el-tag>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="period" label="启用的周期值" width="145" align="center"></el-table-column> -->
                    <!-- <el-table-column prop="successRate" label="胜率" width="145" align="center"></el-table-column> -->
                    <el-table-column label="操作" align="center" width="185">
                        <template #default="scope">
                            <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button link type="primary" @click="handleSet(scope.row)">周期设置</el-button>
                            <el-button link type="primary" v-if="!scope.row.status"
                                @click="handleStatus(scope.row, 1)">启用</el-button>
                            <el-button link type="primary" v-else
                                @click="handleStatus(scope.row, 0)">禁用</el-button>
                            <!--<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)" >删除</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <el-dialog title="策略周期全局设置" v-model="dialogVisiable" :close-on-click-modal="false" width="600px">
                <el-form ref="form" :model="form" label-width="120px">
                    <el-checkbox-group v-model="checkList">
                        <el-checkbox v-for="item in columns" :key="item.value" :label="item.value">{{  item.text }}</el-checkbox>
                    </el-checkbox-group>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">

                        <el-button @click="dialogVisiable = false">取 消</el-button>
                        <el-button type="primary" @click="handleReset()" :loading="formLoading">重置</el-button>
                        <el-button type="primary" @click="onSubmitPointsChange()" :loading="formLoading">提交</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { getStrategyList, saveStrategy, saveStrategyPeriod } from '@/api/strategy'
import { utilsMixin } from '@/mixin/utils'
export default {
    name: 'StrategyList',
    mixins: [utilsMixin],
    data() {
        return {
            currentStrategy: {},
            formLoading: false,
            dialogVisiable: false,
            checkList: [],
            columns: [
                { text: '5分钟', value: '1', select: false },
                { text: '15分钟', value: '2', select: false },
                { text: '30分钟', value: '3', select: false },
                { text: '1小时', value: '4', select: false },
                { text: '2小时', value: '7', select: false },
                { text: '4小时', value: '5', select: false },
                { text: '6小时', value: '8', select: false },
                { text: '12小时', value: '9', select: false },
                { text: '日线', value: '6', select: false },
            ],
            periodDesc: {
                1: '5分钟',
                2: '15分钟',
                3: '30分钟',
                4: '1小时',
                7: '2小时',
                5: '4小时',
                8: '6小时',
                9: '12小时',
                6: '日线',
            },
            list: null, // 列表数据
            listLoading: true, // 加载状态
        }
    },
    created() {
        this.fetchData()
    },

    methods: {
        fetchData() {
            this.listLoading = true
            getStrategyList({}).then(response => {
                if (response.success && response.data != null) {
                    this.list = response.data;
                    
                }
                this.listLoading = false
            }).catch(() => {
                this.listLoading = false
            })
            // this.list = [
            //     {
            //         "id": 1, //策略id
            //         "strategyName": "异动策略", //策略名称
            //         "strategyDesc": "策略描述", //策略描述
            //         "methodName": "DEMA", //策略对应方法名称
            //         "status": 1, //状态  0 关闭  1 启用
            //         "period": "1,2,3,4,5,6,7,8,9" //启用的周期值
            //     },
            //     {
            //         "id": 2, //策略id
            //         "strategyName": "波段趋势长线", //策略名称
            //         "strategyDesc": "策略描述", //策略描述
            //         "methodName": "DEMA", //策略对应方法名称
            //         "status": 0, //状态  0 关闭  1 启用
            //         "period": "3,4,5" //启用的周期值
            //     }
            // ];
        },
        handleSet(row) {
            this.currentStrategy = row;

            this.checkList = row.period.split(',').filter(item => item);
            console.log('=======', this.checkList)
            this.dialogVisiable = true;
        },
        handleReset() {
            let checkList = [];
            switch (this.currentStrategy.id) {
                case 1:
                    checkList = ['5']; // 默认4h
                    break;
                case 2:
                    checkList = ['3', '4', '7', '5', '9', '6']; // 默认30分钟，1h，2h，4h，12h，日线
                    break;
                case 3:
                    checkList = ['7', '5', '8']; // 2h，4h，6h
                    break;
                case 4:
                    checkList = ['5']; // 默认1h
                    break;
                case 5:
                    checkList = ['9', '6'];  // 默认12h,日线
                    break;
            
                default:
                    break;
            }
            this.checkList = checkList;
        },
        onSubmitPointsChange() {
            this.formLoading = true
            
            let periodArr = [];
            this.columns.forEach(item => {
                if (this.checkList.includes(item.value)) {
                    periodArr.push(item.value)
                }
            })
            saveStrategyPeriod({
                id: this.currentStrategy.id,
                period: periodArr.join(','),
            }).then(() => {
                this.formLoading = false
                this.dialogVisiable = false
                this.fetchData()
            }).catch(() => {
                this.formLoading = false
            })
        },
        handleStatus(row, status) {
            this.$confirm('是否进行此操作？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                // changeStatus(row.id, status).then(() => {
                //     this.fetchData()
                // })
                saveStrategy({
                    id: row.id,
                    status,
                }).then(res => {
                    if (res.code === 20000) {
                        this.$message({ message: '设置成功', type: 'success' });
                        this.fetchData();
                    }
                 })
            }).catch(() => { })
        },
        onCreate() {
            this.$router.push({ path: '/system/edit/create' })
        },
        handleEdit(row) {
            this.$router.push({ path: '/system/edit/' + row.id })
        },
        // handleOpen(row) {
        //     this.$router.push({
        //         name: 'StrategySave', query: {
        //         id: row.id
        //     }})
        // }
    }
}
</script>
